在編寫 SCSS 時，可能需要檢查變數、函數或條件的正確性，甚至需要在開發階段調試程式碼。SASS 提供了 @error、@warn 和 @debug 三個指令，幫助你有效處理錯誤、警告以及調試代碼。

一、@error 指令

@error 用於在編譯過程中顯示錯誤信息，並中止編譯。通常用於檢查無效參數或條件，防止不正確的樣式進行編譯。

$primary-color: '';

@if $primary-color == '' {
  @error "顏色未定義";
}

如果 $primary-color 沒有被定義，編譯時會報錯並停止。

二、@warn 指令

@warn 用於顯示警告訊息，但不會中止編譯。這適合用於提示某些潛在問題或提醒開發者注意。

$font-size: 0;

@if $font-size <= 0 {
  @warn "字體要大於0!";
}

p {
  font-size: $font-size;
}

當 $font-size 為 0 或更小時，將顯示警告訊息，但 SCSS 仍會編譯成功。

三、@debug 指令

@debug 用於在編譯過程中顯示變數或運算結果的資訊，適合用於調試和查看運行時的狀態。

$padding: 10px;
$margin: 5px;

@debug $padding + $margin; // This will output: 15px

編譯時會在終端或控制台中輸出 15px，幫助你確認變數的值。

四、錯誤與警告處理

在開發過程中，合理使用 @error、@warn 來檢查不正確的變數、函數參數或狀態，有助於早期發現問題，減少維護成本。這特別適用於大型項目或需要與其他團隊成員協作時，提供更好的代碼品質保障。

讓我們結合 @error 和 @warn寫看看程式!

@mixin set-width($width) {
  @if $width <= 0 {
    @error "操作錯誤，不能小於等於0";
  } @else if $width > 100% {
    @warn "你輸入錯誤!";
  }
  
  width: $width;
}

.container {
  @include set-width(120%);
}

在這個範例中，若傳入的 width 大於 100%，將顯示警告；若等於或小於 0，則報錯並停止編譯。

如何調整 SCSS 代碼

使用 @debug 來顯示變數的值，便於查看運行中的變數狀態。
透過 @warn 提示潛在問題，協助偵測邏輯錯誤或不正確的參數。
利用 @error 中止編譯，避免不符合預期的程式碼進入最終 CSS。
呀哈!!!!~~~